<template>
	<view class="container rent-sure">
		<view class="yuan-form">
			<view class="page-top">
				<view>
					<view>{{landName}}</view>
					<view class="page-top-name">{{selLandObj.gardenName}}</view>
				</view>
				<image class="page-top-img" :src="$fileUrl+'service-full.png'" mode="aspectFill"></image>
			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">地块编号</view>
				<view class="yuan-form-row">
					<span class="yuan-input">{{selLandObj.seqCode}}</span>
				</view>

			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">地块面积</view>
				<view class="yuan-form-row">
					<span class="yuan-input">{{selLandObj.gardenArea}}m²</span>
				</view>

			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">服务类型</view>
				<view class="yuan-form-row">
					<picker class="yuan-form-picker" mode="selector" :range="serviceList" range-key="serviceName"
						@change="serviceChange">
						<view class="yuan-input picker-input" v-if="formData.serviceId">
							{{getServiceName(formData.serviceId)}}
						</view>
						<view class="yuan-input picker-input placeholder-style" v-else>请选择服务类型</view>
						<text class="yuan-form-rico iconfont">&#xe775;</text>
					</picker>

				</view>

			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">租赁周期</view>
				<view class="yuan-form-row">
					<picker class="yuan-form-picker" mode="selector" :range="cycleArr" @change="cycleChange">
						<view class="yuan-input picker-input" v-if="formData.cycle">{{formData.cycle}}年
						</view>
						<view class="yuan-input picker-input placeholder-style" v-else>请选择租赁周期</view>
						<text class="yuan-form-rico iconfont">&#xe775;</text>
					</picker>

				</view>

			</view>
		</view>

		<view class="yuan-form" @click="jump('/pages/user/addrList?type=selectAddr')">
			<view class="form-title">
				<text class="form-title-words">配送信息</text>
				<text class="form-title-tips">更换地址</text>
				<text class="iconfont">&#xe775;</text>
			</view>

			<view class="addr-panel" v-if="addrInfo&&addrInfo.id">
				<view class="addr-list">
					<text class="iconfont">&#xe842;</text>
					<text>{{addrInfo.name}}-{{addrInfo.phone}}</text>
				</view>
				<view class="addr-list">
					<text class="iconfont">&#xe636;</text>
					<text>{{addrInfo.address}}</text>
				</view>
			</view>
			<view class="iconfont add-seed" v-else>&#xe607; 选择地址</view>
		</view>
		<view class="yuan-form">
			<view class="form-title">
				<text class="form-title-words">租赁人信息</text>
			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">姓名</view>
				<view class="yuan-form-row">
					<input class="yuan-input" v-model="formData.renterName" type="text" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">电话</view>
				<view class="yuan-form-row">
					<input class="yuan-input" v-model="formData.renterPhone" type="number" placeholder="请输入电话" />
				</view>
			</view>
			<view class="yuan-form-row-list">
				<view class="yuan-form-label">备注</view>
				<view class="yuan-form-row">
					<textarea class="yuan-textarea" v-model="formData.renterRemark" type="text" placeholder="有问题请告诉我" />
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="bottom-left">

				<view class="total-box">
					<text>总计：</text>
					<text style="color:#FF5F56">￥</text>
					<text class="total-price">{{priceData.total && priceData.total.price}}</text>
					<text style="padding:10rpx 20rpx" @click="showPriceDetail=true">查看明细</text>
				</view>
				<view class="bottom-agreement">
					<text class="iconfont" :class="agreeType&&'c-success'" @click="agreeType=!agreeType">&#xe63c;</text>
					<text @click="agreeType=!agreeType">阅读并同意</text>
					<text class="c-primary" @click="showDetailType=true">《租赁协议》</text>
				</view>
			</view>
			<view class="bottom-right yuan-btn btn-success" @click="clickSure">立即支付</view>
		</view>
		<view class="price-detail" :class="showPriceDetail&& 'show-price-detail'" @touchmove.stop.prevent="moveHandle"
			@click="showPriceDetail=false">
			<view class="price-main" :class="showPriceDetail&& 'show-price-main'">
				<view class="p-d-list" v-for="item in priceData.items" :key="item.name">
					<text>{{item.name}}</text>
					<text class="p-d-price">￥{{item.price}}</text>
				</view>
				<view class="p-d-list">
					<text>总计</text>
					<text class="p-d-total">￥{{priceData.total&&priceData.total.price}}</text>
				</view>
			</view>

		</view>
		<view class="detail-panel" :class="showDetailType&&'detail-panel-show'" @click="showDetailType=false"
			@touchmove.stop.prevent="moveHandle">
			<scroll-view class="detail-box" :scroll-y="true">
				<view class="rich-parent">
					<rich-text class="rich-box" :nodes="selLandObj&&selLandObj.protocol"></rich-text>
				</view>
		
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import api from '../../common/api';
	import { hideLoading, showLoading, showToast } from '../../common/util';
	import commonStore from '../../store/commonStore';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	const isLoading = ref(false)
	const seedShow = ref(false)
	const agreeType = ref(false)
	const showPriceDetail = ref(false)
	const formData = reactive<any>({})
	const cycleArr = [1, 2, 3]
	const pageId = ref('')
	const landName = ref('')
	const showDetailType = ref(false)
	onLoad((options) => {
		pageId.value = options.id;
		landName.value = options.landName;
		formData.cycle = options.cycle || 1;
		formData.serviceId = options.serviceId;
	})
	onShow(() => {
		getAddrInfo()
	})
	const selLandObj = ref<any>({})
	onMounted(async () => {
		getServiceList()
		selLandObj.value = commonStore.state.selLandObj || {}
		console.info(selLandObj.value)
		getPrice()
	})
	const cycleChange = (e : any) => {
		formData.cycle = cycleArr[e.detail.value]
		getPrice()
	}
	const serviceChange = (e : any) => {
		formData.serviceId = serviceList.value[e.detail.value].serviceId
		getPrice()
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const moveHandle = () => {
		//
	}

	const serviceList = ref([])
	const getServiceList = async () => {
		showLoading()
		try {
			const res = await api.getServiceList({ rentLandId: pageId.value })
			serviceList.value = res.data || []
		} finally {
			hideLoading()
		}

	}
	const getServiceName = (id) => {
		const find = serviceList.value.find(item => item.serviceId + '' === id + '')
		if (find) {
			return find.serviceName
		}
		return ''
	}

	const addrInfo = ref<any>({})
	const getAddrInfo = () => {
		//如果store 有数据 取store数据，如果没有，去默认地址
		const storeAddr = commonStore.state.selAddr
		if (storeAddr && storeAddr.id) {
			addrInfo.value = storeAddr
		} else {
			getDefAddr()
		}
	}
	const getDefAddr = async () => {
		showLoading()
		try {
			const res = await api.getAddrList()
			const data = res.data
			addrInfo.value = data.find(item => {
				return item.defaultFlag === '2'
			})
		} finally {
			hideLoading()
		}
	}

	const priceData = ref<any>({})
	const getPrice = async () => {
		showLoading()
		try {
			const res = await api.getPlanPrice({
				"seqCode": selLandObj.value.seqCode,
				"rentPeriod": formData.cycle,
				"serviceType": formData.serviceId,
			})
			priceData.value = res.data
		} finally {
			hideLoading()
		}
	}
	const clickSure = async() => {
		if(!agreeType.value){
			showToast('请查看并同意租赁协议')
			return
		}
		if (!formData.renterName) {
			showToast('请输入租赁人姓名')
			return
		}
		if (!formData.renterPhone) {
			showToast('请输入租赁人电话')
			return
		}
		if (!addrInfo.value || !addrInfo.value.id) {
			showToast('请先选择地址')
			return
		}
		const data = {
			...formData,
			"addressId": addrInfo.value.id,
			"seqCode": selLandObj.value.seqCode,
			"rentPeriod": formData.cycle,
			"renterPrize": priceData.value.total.price,
			"serviceType": formData.serviceId,
			//"serviceId": formData.serviceId
		}
		showLoading()
		try {
			const res = await api.addRentOrder(data)
			// 调起支付
			const payRes = await api.getPayRes({
				"totalFee": 0.01,//res.data.totalFee,
				"serialNumber": res.data.recordNo,
				"openid": res.data.openid
			})
			doPay({...payRes.data,orderId:res.data.recordId})
			// showToast('保存成功')
			// uni.navigateBack()
		} finally {
			hideLoading()
		}
	}
	const doPay = (payData) => {
		wx.requestPayment({
			timeStamp: payData.timeStamp + '',
			nonceStr: payData.nonceStr,
			package: payData.package,
			signType: 'RSA',
			paySign: payData.paySign,
			success(res) {
				doPaySuccess(payData)
			},
			fail(res) {
				console.info(res)
			}
		})
	
	}
	const doPaySuccess = async (payData : any) => {
		payNum = 0
		// 多次查询后台支付是否成功
		showLoading({ title: '支付结果查询中，请稍后' })
		getPayStatus(payData)
	}
	let payNum = 0
	const getPayStatus = async (payData : any) => {
		payNum++
		const res = await api.getRentRecordById({ id:payData.orderId})
		if (res.data.status === '2') {
			//支付成功
			hideLoading()
			showToast('支付成功',{},()=>{
				uni.redirectTo({
					url: '/pages/user/myLand'
				})
			})
			
		} else {
			if (payNum >= 5) {
				hideLoading()
				showToast('支付结果查询失败，请联系客服或刷新界面查看结果',{},()=>{
					uni.redirectTo({
						url: '/pages/user/myLand'
					})
				})
				
			} else {
				setTimeout(() => {
					getPayStatus(payData)
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.rent-sure {
		padding: 30rpx;
		padding-bottom: 130rpx;

		.yuan-form {
			background-color: #fff;
			padding: 0 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1)
		}

		.page-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1px #eee;
			padding: 20rpx 0;
			font-size: 34rpx;
			font-weight: bold;
		}

		.page-top-name {
			color: #17CC77;
			margin-top: 20rpx;
			font-weight: lighter;
		}

		.page-top-img {
			width: 120rpx;
			height: 120rpx;
		}

		.form-title {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: solid 1px #eee;

			.iconfont {
				font-size: 30rpx;
				color: #8F8F8F;
			}
		}

		.form-title-words {
			flex-grow: 1;
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
		}

		.form-title-tips {
			font-size: 28rpx;
			color: #8F8F8F;
		}

		.seed-top {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}

		.add-seed {
			border: solid 1px #17CC77;
			color: #17CC77;
			margin: 0 auto;
			width: 200rpx;
			height: 68rpx;
			border-radius: 68rpx;
			line-height: 68rpx;
			text-align: center;
			font-size: 26rpx;
			margin-top: 30rpx;
		}

		.seed-img {
			width: 120rpx;
			height: 120rpx;
		}

		.seed-name {
			flex-grow: 1;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #232323;
		}

		.seed-area {
			font-size: 30rpx;
			color: #8F8F8F;
		}

		.seed-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #232323;
			text-align: center;
			padding: 20rpx 0;
		}

		.seed-content {
			margin-bottom: 40rpx;
		}

		.seed-content-list {
			display: inline-block;
			width: 33.3%;
			text-align: center;
		}

		.seed-c-l-title {
			font-size: 28rpx;
			color: #5B5B5B;
		}

		.seed-c-l-info {
			font-size: 28rpx;
			color: #232323;
			margin-top: 20rpx;
		}

		.seed-bottom {
			text-align: center;
			font-size: 28rpx;
			color: #8F8F8F;
			padding: 20rpx;

			.iconfont {
				display: inline-block;
				transform: rotate(180deg);
			}
		}

		.addr-panel {
			padding: 20rpx 0;
		}

		.addr-list {
			font-size: 28rpx;
			color: #8F8F8F;
			margin-bottom: 10rpx;

			.iconfont {
				margin-right: 20rpx;
				color: #17CC77;

			}
		}

		.page-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 130rpx;
			background: #FFFFFF;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 20rpx 20rpx;
			z-index: 98;
		}

		.bottom-right {
			width: 170rpx;
			height: 66rpx;
			border-radius: 66rpx;
		}

		.bottom-agreement {
			font-size: 26rpx;
			color: #8F8F8F;
			display: flex;
			align-items: center;
			margin-top: 8rpx;

			.iconfont {
				color: #eee;
				transform: translateY(4rpx);
				margin-right: 8rpx;
			}
		}

		.total-box {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.total-price {
			font-size: 30rpx;
			color: #FF5F56;
		}


		.price-detail {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 99;
			left: -9999px;
			top: -9999px;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.show-price-detail {
			left: 0;
			top: 0;
		}

		.price-main {
			background-color: #fff;
			position: absolute;
			bottom: 0;
			width: 100%;
			border-radius: 14rpx 14rpx 0 0;
			transform: translateY(100%);
			transition: all 0.3s;
			padding: 20rpx;
		}

		.show-price-main {
			transform: translateY(0);
		}

		.p-d-list {
			display: flex;
			font-size: 28rpx;
			color: #8F8F8F;
			justify-content: space-between;
			margin-bottom: 15rpx;
		}

		.p-d-price {
			color: #232323;
		}

		.p-d-total {
			color: #FF5F56;
		}

		.yuan-form-picker {
			position: relative;
		}

		.yuan-form-rico {
			position: absolute;
			right: 0;
			top: 8rpx;
		}
		
		.detail-panel {
			width: 100%;
			height: 100%;
			position: fixed;
			left: -9999px;
			top: 0;
			background-color: rgba(0, 0, 0, 0.3);
		}
		
		.detail-panel-show {
			left: 0;
			z-index: 999;
			.detail-box {
				bottom: 0;
			}
		}
		
		.detail-box {
			background-color: #F9F9F9;
			border-radius: 14rpx 14rpx 0 0;
			position: absolute;
			left: 0;
			bottom: -100%;
			width: 100%;
			transition: all 0.3s;
			max-height: 80vh;
			overflow: auto;
		
			box-sizing: border-box;
		}
		
		.rich-parent{
			padding: 20rpx;
		}

	}
</style>